


@charset "utf-8";

/*reset*/
body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select,img,span{ margin:0; padding:0; }
em { font-style:normal; }
li { list-style:none; }
a { text-decoration:none; color: #333333;}
img, input{ border:none; vertical-align:top; }
table { border-collapse:collapse; }
input,textarea { outline:none; }
textarea { resize:none; overflow:auto; }
body { font: 14px / 1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;}
/* reset end */

/* public */
.clearfix{ zoom:1; }
.clearfix:after{ content:''; display:block; clear:both;}
.fl { float:left; }
.fr { float:right; }
.wrap{ margin-right: -14px;}


#header, #nav, .nav_show, #content_b, #footer{ width: 100%;}
.container{ width: 1226px; margin: 0 auto;}
.container{ overflow: hidden;}
#header{ height: 40px; background: #333333;}
#nav{ height: 100px; position: relative;}
#content_t{ width: 1226px; margin: 0 auto; height: 1108px;}
#content_b{ background: #F5F5F5; position: relative; padding: 60px 0 0 0;}

.footer_service{ height: 80px;}
.footer_link{ height: 192px}
.footer_info{ height: 96px; background: #FAFAFA;}


@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}


/*public end*/





/*公共结构样式开始*/
.list_4 li{ float: left; width: 296px; position: relative; margin: 0 14px 14px 0;}


.list_5 .img, .list_5 .a_title, .list_5 em, .list_5 span{ display: block; width: 234px; position: absolute; text-align: center; font-size: 14px;}
.side_img, .side_img img, .list_5 li{ float: left; width: 234px; position: relative;margin: 0 14px 14px 0;}
.list_4 li, .list_5 li{ background: #FFFFFF;}
.side_img{ background: #F5F5F5;}
.list_5 li .img{ position: absolute; bottom: 98px; padding-bottom: 20px;}
.list_5 .a_title{ bottom: 86px; height: 16px;}
.list_5 em{ bottom: 58px; color: #FF6700;}
.list_5 span{ bottom: 26px; color: #757575;}
 #content_b .side_img img.active, #content_b .wrap li.active{ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); transform: translate3d(0, -2px, 0);}

.list_5 li.small{ background: #F5F5F5;}
#content_b .small_1, #content_b .small_2{ width: 234; height: 143px; margin-bottom: 14px; background: #FFFFFF; position: relative;}
.small_1 a.a_s_title{ width: 94px; height: 21px; display: block; line-height: 21px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; position: absolute; top: 40px; left: 30px;}
.small_1 p{ position: absolute; left: 30px; top: 65px; color: #FF6700;}
.small_1 a.img img, .small_1 a.img{ width: 80px; height: 80px;}
.small_1 a.img{ position: absolute; right: 20px; top: 30px;}
.small_2 .more{ display: block; padding: 50px 110px 0 30px; font-size: 18px;}
.small_2 .more small{ font-size: 12px;}
.small_2 .more img{ position: absolute; top: 50px; right: 36px;}

.l5_wrap{ float: right; position: relative;}
.l5_wrap ul.list_5{ display: none;}

.p_title h2, .p_title em, .p_title a{ display: block;}
.p_title{width: 100%; height: 58px; line-height: 58px; overflow: hidden;}
.p_title h2{ height: 58px; font-size: 22px; font-weight: 200;}
.p_title em{ float: left; width: 36px; height: 24px; border: 1px solid #E0E0E0; margin-top: 17px; line-height: 25px; text-align: center; font-size: 16px; font-family: "iconfont" !important; font-weight: bolder; color: #E0E0E2; cursor: pointer; text-indent: -4px;}
.p_title em.next{ margin-left: -1px;}
.p_title em.active{ color: #BCB2B0;}

.p_title ul li{ float: left; font-size: 16px; line-height: 20px; margin: 19px 0 19px 30px; height: 20px; color: #424242;}
.p_title ul li:hover, .p_title ul li.active{ color: #FF6700; border-bottom: 2px solid #FF6700; cursor: pointer;}

.p_title a{ font-size: 16px; position: relative; padding-right: 25px;}
.p_title a span{ display: block; width: 20px; height: 20px; line-height: 21px; text-align: center; color: #ffffff; font-family: "iconfont" !important; font-weight: bolder; border-radius: 50%; background: #B0B0B0; font: 18px; position: absolute; right: 0; top: 18px; text-indent: -5px;}
.p_title a span:hover{ background: #FF6700;}
.p_title a:hover{ color: #FF6700;}



.highlight{ width: 174px; padding: 0 30px; background: #FF6700; position: absolute; bottom: 0; font-size: 12px; text-align: left; height: 0; overflow: hidden; z-index: 10;}
.highlight em{ width: 174px; height: 28px; margin-bottom: 5px; color: #fff; font-size: 12px; position: absolute; top: 8px; text-align: left;}
.highlight span{ width: 174px; position: absolute; top: 48px; left: 30px; text-align: left; color: rgba(255,255,255,0.6);}



/*公共结构样式结束*/



/*头部私有样式*/
#header span, #header a{ display: block; line-height: 40px; font-size: 12px; color: #B0B0B0;}
.header_nav span, .header_nav a{ float: left;}
.header_user span, .header_user a{ float: right;}
#header span{ color: #424242; padding: 0 0.6em;}
#header a:hover{ color: #fff;}
.header_user .register{ margin-right: 20px;}
#header .container{ position: absolute; margin: auto; left: 0; right: 0; overflow: visible;}

.header_user .shop{ display: block; width: 120px; height: 40px; background: url("../img/shop.gif") 16px -21px no-repeat; background-color: #424242; text-indent: 40px; }
#header .header_user a.shop:hover{ background: url("../img/shop.gif") 16px 13px no-repeat; background-color: #fff; color: #FF6700;}
.header_user .shop_show{ width: 316px; height: 98px; line-height: 100px; text-align: center; background: red; position: absolute; right: 0px; top: 40px; z-index: 10; color: #424242; background: #fff; box-shadow: 0 8px 10px -2px rgba(0,0,0,0.15); display: none; overflow: hidden;}       




/*导航栏私有样式*/
#nav .container{ overflow: visible;}
.nav_show{ position: relative; height: 100px;}
#nav .nav_show ul li{ float: left;}
#nav .nav_show .img, #nav .nav_show a.logo, #nav .nav_show a.gif, #nav .nav_show form, #nav .nav_show ul.nav_main{ position: absolute; display: block; height: 100px; line-height: 100px;}
#nav .nav_show .img{ width: 270px; bottom: 0; left: -25px;}
#nav .nav_show a.logo{width: 148px; left: 5px; bottom: 40px;}
#nav .nav_show a.gif{left:106px; width:221px; right:40px;bottom:38px;}
#nav .nav_show a.gif img, #nav .nav_show a.logo img{ position: absolute; right: 73px; bottom: -20px;}
#nav .nav_show ul.nav_main{ left: 230px;}
#nav .nav_show ul.nav_main li a{ display: block; padding: 0 18px; font-size: 16px;}
#nav .nav_show ul.nav_main li a:hover{ color: #FF6700;}

#nav .nav_show form{ right: 0; padding: 25px 0;}
#nav .nav_show form .txt{ width: 243px; height: 48px; border: 1px solid #E0E0E0; margin-right: -5px; text-indent: 10px; }
#nav .nav_show form .s_btn{ display: block; position: absolute; right: 0; top: 25px; padding: 0; margin: 0; width: 50px; height: 50px; line-height: 45px; text-align: center; background: transparent; font-size: 16px;}
#nav .nav_show form .btn{ width: 50px; height: 50px; border: 1px solid #E0E0E0; background: #fff;}
#nav .nav_show form a{ display: inline-block; position: absolute; top: 41px; height: 18px; line-height: 18px; padding: 0 5px; background: #EEEEEE; font-size: 12px; color: #757575;}
#nav .nav_show form a.txt_1{ right: 60px;}
#nav .nav_show form a.txt_2{ right: 130px;}
#nav .nav_show form a:hover{ background: #FF6700; color: #FFFFFF;}
#nav form .key_words{ width: 243px; border: 1px solid #FF6700; position: absolute; top: 74px; left: 0px; z-index: 3; background: #fff; padding: 0; display: none;}
#nav form .key_words li a{ display: block; width: 213px; height: 32px; line-height: 30px; padding: 0 15px; position: static; background: #fff;  font-size: 12px; color: #424242;}
#nav form .key_words li a span{ float: right; color: #B0B0B0;  font-size: 12px;}


#nav_menu{ width: 100%; height: 229px; background: #ffffff; position: absolute; top: 100px; z-index: 20; border-top: 1px solid #e0e0e0; background: #fff; display: none; overflow: hidden;}
#nav_menu ul li{ display: list-item; position: relative; float: left; width: 180px; padding: 35px 12px 0; text-align: center; font-size: 12px;}
#nav_menu ul li+li::before{ position: absolute; left: 0; top: 35px; z-index: 1; width: 1px; height: 100px; content: ""; background-color: #e0e0e0;}
#nav_menu ul li a, #nav_menu ul li p{ display: block; text-align: center;}
#nav_menu ul li a img{ width: 160px; height: 110px;}
#nav_menu ul li a.img{ height: 115px;} 
#nav_menu ul li a.title, #nav_menu ul li p{ height: 20px; line-height: 20px;}
#nav_menu ul li a.title{ padding-top: 10px;}
#nav_menu ul li p{ color: #FF6700;}



/*轮播图私有样式*/
#content_t .switch{ position: relative; padding-bottom: 472px;}
#content_t .switch .s_img{position:absolute;width:8582px;height:460px;}
#content_t .switch .s_img li{float:left;}


/*#content_t .switch, #content_t .switch .s_img, #content_t .switch .s_img li, #content_t .switch .s_img img{ width: 1226px; height: 460px;}*/
#content_t .switch .arrow a{ display: block; width: 41px; height: 69px; line-height: 69px; text-align: center; font-size: 36px; font-weight: 300; color: #CCA0A0; font-family: "iconfont" !important; position: absolute; top: 195px; text-indent: -5px;}
#content_t .switch .arrow a.prev{ left: 234px;}
#content_t .switch .arrow a.next{ right: 0;}
#content_t .switch .arrow a:hover{ background-color: rgba(0,0,0,0.3); color: #fff;}
#content_t .switch .tab_btn{ width: 100px; height: 10px; position: absolute; right: 30px; bottom: 25px;}
#content_t .switch .tab_btn span{ display: block; float: left; width: 6px; height: 6px; margin: 0 5px; border: 2px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.4); border-radius: 10px; cursor: pointer;}
#content_t .switch .tab_btn span.active, #content_t .switch .tab_btn span:hover{ border-color: rgba(0,0,0,0.4); background: rgba(255,255,255,0.3);}



/*轮播图左侧列表私有样式*/
#content_t .switch .s_nav{ height: 420px; width: 234px; position: absolute; padding: 20px 0; top: 0; left: 0; color: #fff; background: rgba(0,0,0,0.6);}
.category-item a{ display: block; width: 204px; padding-left: 30px; height: 42px; line-height: 42px; color: #fff;}
.category-item a i{ float: right; padding: 12px 20px 0 0; font-size: 12px; line-height: 16px; line-height: 20px; font-family: "iconfont" !important; font-weight: bold; font-style: normal;}
.category-item a:hover{ background: #FF6700;}
.category-item .children{  height: 459px; background: #fff;  border-top: 1px solid #E0E0E0; position: absolute; left: 234px; top: 0; box-shadow: 0 8px 16px rgba(0,0,0,0.18);   display: none;}
.category-item .children ul{ width: 265px; height: 462px; float: left;}
.category-item .children ul li{ position: relative;}
.category-item .children ul li a{display: block; width: 229px; height: 37px; padding: 20px 18px; line-height: 40px; color: #333; position: relative;}
.category-item .children ul li a:hover{ background: none;}
.category-item .children ul li a img{ width: 40px; height: 40px; padding-right: 12px;}
.category-item .children ul li a span:hover{ color: #FF6700;}
.category-item .children ul li a.select{display: block; position: absolute; right: 10px; top: 26px;
padding: 0; width: 58px; height: 22px; line-height: 22px; border: 1px solid #ff6700; background: #fff; color: #ff6700; text-align: center; font-size: 12px;}
.category-item .children ul li a.select:hover{ background: #ff6700; color: #fff;}
.category-item .children_col1{ width: 266px;}
.category-item .children_col2{ width: 531px;}
.category-item .children_col3{ width: 796px;}


/*home私有样式*/
#content_t .s_home{ height: 196px; margin-right: -14px;}
#content_t .s_home a.img, #content_t .s_home ul{ display: block; float: left; margin-right: 14px;}
#content_t .s_home a.img, #content_t .s_home a.img img{ width: 316px; height: 170px;}
#content_t .s_home ul{ width: 234px; height: 170px;background: #5f5750;}
#content_t .s_home ul li{margin-left:8px;margin-top:14px;display:inline-block;text-align:center;width:65px;height:70px;}
#content_t .s_home ul li img{width:30px;display:block;line-height:30px;margin:0 auto;}
#content_t .s_home ul li span{line-height:40px;color:#fff;font-size:12px;}


/*小米明星单品私有样式*/
.stars .wrap{ position: relative;}
.stars .list_5{ height: 340px; padding-bottom: 40px;  width: 2480px; position: relative; left: 0;}
.stars .list_5 li{ height: 300px; background: #FAFAFA; padding-top: 39px; border-top: 1px solid green;}
.stars .list_5 li .img{ bottom: 110px;}



/*为你推荐私有样式*/
.recommend .wrap{ position: relative;}
.recommend .list_5{ width: 2480px; height: 300px; position: relative; left: 0;}
.recommend .list_5 li{ height: 280px;}


/*智能硬件、搭配、配件、周边私有样式*/
.hardware, .collocation, .parts, .ground{ height: 698px;}
.hardware .list_5, .collocation .list_5, .parts .list_5, .ground .list_5{ height: 634px; width: 992px;  display: block; position: absolute; right: 0;}
.hardware .list_5 li, .collocation .list_5 li,.parts .list_5 li, .ground .list_5 li{ height: 300px;}
.hardware .l5_wrap ul.list_5{ display: block;}



/*热评产品私有样式*/
.hot .list_4{ height: 435px;}
.hot .list_4 li{ height: 415px;}
.hot .describe{ padding: 28px;}
.hot .describe .text{ display: block; height: 72px; margin-bottom: 22px; font-size: 14px; line-height: 24px;}
.hot .describe p{ height: 18px; margin-bottom: 8px; font-size: 12px; color: #b0b0b0;}
.hot .describe em{ color: #E0E0E0;}
.hot .describe em a{ display: block; float: left; font-size: 14px; max-width: 170px; text-overflow: ellipsis; white-space: nowrap;overflow: hidden; margin-right: 10px;}
.hot .describe em strong{ display: block; float: left; color: #FF6700; margin-left: 8px; font-weight: normal;}
.hot .describe em span{ display: block; float: left;}


/*内容私有样式*/
.con .list_4{ height: 440px;}
.con .list_4 li{ height: 374px; width: 296px; padding: 45px 0 0; overflow: hidden; border-top: 1px solid #83C44E;}
.con .list_4 li h3{ margin: 0 10px 18px; font-size: 16px; font-weight: 400; text-align: center;}
.con .list_4 li ol{ width: 1148px; position: relative; left: 0;}
.con .list_4 li ol li{ width: 296px; height: 340px; padding: 0; margin: 0; position: relative; border: none;}
.con ol li .item{ display: block; white-space: nowrap; margin: 0 20px 5px; font-size: 20px; font-weight: 400; line-height: 1.25; text-overflow: ellipsis; text-align: center;}
.con ol li p a{ display: block; margin: 0 48px 10px; height: 40px; font-size: 12px; line-height: 20px; text-align: center; color: #b0b0b0;}
.con ol li a.cost{ display: block; height: 21px; margin: 0 10px 15px; text-align: center;}
.con ol li a.img{ display: block; text-align: center;}
.con ul li .tab_btn{ width: 136px; height: 30px; padding: 0 80px 15px; position: absolute; bottom: 0;}
.con ul li .tab_btn span{ display: block; float: left; width: 6px; height: 6px; margin: 10px 12px; border-radius: 50%; background: #B0B0B0; cursor: pointer; border: 2px solid #fff;}
.con ul li .tab_btn span.active{ width: 6px; height: 6px; border: 2px solid #FF6700; background: #FFFFFF}
.con ul li .tab_btn span:hover{ background: #FF6700;}
.con ul li .arrow a{ display: block; width: 20px; height: 48px; line-height: 48px; text-align: center; font-size: 18px; font-family: "iconfont" !important; position: absolute; top: 186px; color: #fff;}
.con ul li .arrow a.active{ background: #D9D9D9;}
.con ul li .arrow a.hover{ background: #8D8D8D;}
.con ul li .prev{ left: 0;}
.con ul li a.next{ right: 0; text-indent: -4px; font-size: 22px;}

.con li.book{ border-color: #FFAC13;}
.con li.book h3{ color: #FFAC13;}
.con li.MIUI_topic{ border-color: #83C44E;}
.con li.MIUI_topic h3{ color: #83C44E;}
.con li.games{ border-color: #E53935;}
.con li.games h3{ color: #E53935;}
.con li.app{ border-color: #2196F3;}
.con li.app h3{ color: #2196F3;}


/*视频私有样式*/
.viedo .list_4{ height: 305px;}
.viedo .list_4 li{ height: 285px;}
.viedo .list_4 a, .viedo .list_4 p{ display: block; text-align: center;}
.viedo .list_4 a.text{ height: 16px; line-height: 16px; padding-top: 30px; font-size: 14px;}
.viedo .list_4 p{ height: 18px;line-height: 18px; color: #B0B0B0; font-size: 12px; padding: 8px;}

/*css3视频图标*/
.viedo_btn{ width: 36px; height: 24px; box-sizing: border-box; border: 2px solid #fff; border-radius: 12px; background: rgba(70,70,70,0.8); position: absolute; top: 145px; left: 20px;}
.viedo_btn:after{ content: ' '; display: block; width: 0; height: 0px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; position: absolute;}
.viedo_btn:after{ top: 4px; left: 13px;}
.viedo_btn.active{ background: #FF6700; border: none;}
.viedo_btn.active:after{ top: 6px; left: 15px;}






/*footer样式*/
#footer a:hover{ color: #ff6700;}
.footer_service{ height: 26px; padding: 27px 0;}
.footer_service li{ float: left; width: 19.8%; height: 25px; border-left: 1px solid #e0e0e0; font-size: 16px; line-height: 25px; text-align: center; color: #616161;}
.footer_service li.first{ border: none;}
.footer_service li span{ font-size: 24px;}

.footer_link{ height: 112px; padding: 40px 0;}
.footer_link dl{ float: left; width: 160px; height: 112px; margin: 0;}
.footer_link dt{ margin: -1px 0 26px; font-size: 14px; line-height: 1.25; color: #42 }
.footer_link dd{ margin: 10px 0 0; font-size: 12px;}

.footer_link .contact{ float: right; width: 251px; height: 112px; border-left: 1px solid #e0e0e0; text-align: center; color: #616161;}
.footer_link p, .footer_link .contact a, .footer_link em, .footer_link span{ display: block; text-align: center;}
.footer_link p{ margin-bottom: 5px; font-size: 22px; line-height: 1; color: #ff6700;}
.footer_link em{ margin-bottom: 16px; font-size: 12px;}
.footer_link .contact a{ width: 118px; height: 28px; font-size: 12px; line-height: 28px; border: 1px solid #ff6700; background: #fff; color: #ff6700; margin-left: 65px;}


.footer_info{ height: 36px; padding: 30px 0; position: relative;}
.footer_info .logo{ float: left; width: 36px; height: 36px; margin-right: 10px;}

.footer_info a{ color: #757575; line-height: 12px; font-size: 8px;}
.footer_info a{ margin: 0 .25em;}
.footer_info p{ display: block; color: #b0b0b0; line-height: 18px; font-size: 12px; height: 18px;}
.footer_info .v_logo{ position: absolute; top: 32px; right: 0;}
.footer_info .v_logo img{ float: right; margin-left: 7px;}